<!--<template>-->
<!--  <router-view/>-->
<!--</template>-->

<!--<script>-->
<!--</script>-->



<!--父级页面:控制除了登录页以外，所有页面共有的头部与左侧菜单栏-->
<!--APP是入口，先找父级Home，再渲染子页面-->
<template>
  <!--  <router-view/>  &lt;!&ndash;刚开始用这个就够了，router-view可变的意思，登录了会显示对应的一行字“用户界面”，等写完登录前端后端后，注释掉就行，不加这个，就是个空白页&ndash;&gt;-->

  <!--可以用el-row来写，但感觉左边侧边栏长度取24份的1份2份都不合适时，那就用原生代码写-->
  <!--display: flex表示给父元素使用弹性布局，效果等效于：所有子元素横置、且父元素会根据子元素横置后的实际高度自动填充高度，相当于子元素都float-->
  <div style="display: flex">
    <!-- 左侧菜单栏，可折叠 折叠时宽度为64px，不折叠时宽度为208px -->
    <div :style="{width:(isCollapse ? '64px':'208px')}">  <!---->
      <!--菜单栏-->
      <el-menu
          background-color="#3c82f5"
          text-color="#fff"
          style="width: 100%;min-height: 100vh;"
          active-text-color="#ff0"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          unique-opened
          @select="selectMenu"
      >
        <!--router允许路由跳转，点击下面用户列表跳转  height: 100%是让滚动条下滚时左边还在拉长  100vh视口高度？是内容不够的话最小高度也要占满1个视口高度
    unique-opened是让只能打开一个列表，防止用户打开多了乱 collapse-transition折叠过渡时间给关掉，就会流畅
    @select="selectMenu"加个选择时触发函数，为了增加面包屑-->
        <!--左侧菜单栏的顶部条 放在菜单里面，是因为要一起折叠-->
        <el-row style="padding-top: 10px;">
          <el-col :span="2"></el-col> <!--左边的空白，也可以列偏移形成空白-->
          <el-col :span="7" style="padding-left: 7px">
            <el-avatar src="fotiaoqiang.jpg" style="width: 35px;height: 35px;"></el-avatar>  <!--把插入图标切成圆形,宽高35则切成正圆-->
          </el-col>
          <el-col :span="isCollapse ? 0 : 13">  <!--折叠占0列，不折叠占13列-->
            <router-link to="/" style="color: #fff;text-decoration: none;font-weight: bold;position: relative;top: 8px;left: 2px">食在指尖</router-link> <!--通常这种标题是跳到首页，去掉超链接格式-->
          </el-col>
        </el-row>
        <!---->
        <el-sub-menu index="1"> <!--能展开-->
          <template #title>
            <el-icon style="font-size: 21px;"><User/></el-icon><span>商户管理</span> <!--<User/>是小人头图标-->
          </template>
          <el-menu-item index="/restaurant">商户列表</el-menu-item> <!--用户的信息，要用/user来跳转过去-->
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px;"><User/></el-icon><span>顾客管理</span> <!--<User/>是小人头图标-->
          </template>
          <el-menu-item index="/customer">顾客列表</el-menu-item> <!--车辆的信息，要跳到/vehicle车辆-->
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px;"><Place/></el-icon><span>订单管理</span>
          </template>
          <el-menu-item index="/order">订单列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size: 21px;"><Location/></el-icon><span>菜品管理</span>
          </template>
          <el-menu-item index="/food">菜品列表</el-menu-item> <!--geo围栏，fence电子-->
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon style="font-size: 21px;"><MessageBox/></el-icon><span>平台员工管理</span>
          </template>
          <el-menu-item index="/management">员工管理</el-menu-item> <!---->
        </el-sub-menu>
      </el-menu>

    </div>


    <!-- 右侧主题内容，永远占满剩余宽度 calc是计算器的意思，系统会自动计算，注意减号-前后必须空格隔开才能识别-->
    <div :style="{width:(isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 208px)')}">
      <!-- 右侧顶部条 -->
      <el-header style="padding-top: 22px;height: 10vh;background-color: #fff"> <!--是再app.vue里整个添了格灰色背景色，所以这顶部条才需要加个白色背景色-->
        <!-- 折叠图标与推出登录 -->  <!-- 不注释就是空的，毕竟没写登录 -->
<!--        <el-row :gutter="10">-->
<!--          <el-col :span="18">+-->
<!--            <el-icon style="font-size: 20px;" @click="changeCollapsed"><Expand/></el-icon>  &lt;!&ndash;加个改变折叠状态的方法&ndash;&gt;-->
<!--          </el-col>-->

<!--          <el-col :span="6" style="position: relative">-->
<!--            <el-dropdown trigger="click" style="position: absolute;right: 20px;"> &lt;!&ndash;搜索下拉，复制第一个过来，手动加个点击下拉，用子绝父相把位置定在右上角&ndash;&gt;-->
<!--              <span style="font-size: 19px;font-weight: bold;"> &lt;!&ndash;{{user.username}}是下面的获取登录用户信息&ndash;&gt;-->
<!--                {{user.username}}-->
<!--              <el-icon><arrow-down/></el-icon>  &lt;!&ndash;向下图标&ndash;&gt;-->
<!--            </span>-->
<!--              <template #dropdown>-->
<!--                <el-dropdown-menu>-->
<!--                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item> &lt;!&ndash;添加点击退出，清除登录数据&ndash;&gt;-->
<!--                </el-dropdown-menu>-->
<!--              </template>-->
<!--            </el-dropdown>-->
<!--          </el-col>-->
<!--        </el-row>-->

        <!---->
        <!-- 面包屑导航 第2行 -->
        <!--&lt;!&ndash;      <el-breadcrumb separator="/"> &lt;!&ndash;如果写死，则需要每个小页面的网址都要写一次,所以不用这个&ndash;&gt;&ndash;&gt;-->
        <!--&lt;!&ndash;        <el-breadcrumb-item>首页</el-breadcrumb-item>1\-->
        <!--&lt;!&ndash;        <el-breadcrumb-item>用户管理</el-breadcrumb-item>&ndash;&gt;-->
        <!--&lt;!&ndash;        <el-breadcrumb-item>用户列表</el-breadcrumb-item>&ndash;&gt;-->
        <!--&lt;!&ndash;      </el-breadcrumb>&ndash;&gt;-->
        <!-- 面包屑导航 第2行 -->
        <el-breadcrumb separator="/" style="position: relative;top: 20px;">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadCrubm">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>

      <!-- 右侧除顶部条与面包屑的部分，都是可变区域，在对应的子级页面里写 就是uerview那些具体页面-->
      <el-main style="padding: 0px;height: 90vh;overflow-y: auto;"> <!-- 纵向溢出时有滚动条 -->
        <router-view/>  <!--写了这个，就把下面的<router-view/>去掉，不然就是2块可变区域的内容-->
      </el-main>

      <!--    <router-view/>  &lt;!&ndash;就是上面写完车辆管理，右边用来凑数，显示“用户列表页”“车辆列表页”，要不右面是个白屏   上面开始写面包屑下面的可变区域时，注释掉这里&ndash;&gt;-->
      <!--这里要是不写router-view-->
      <!--前端页面先找app入口，分2只login和home。跳转登录login，登录成功，跳到home，在router的index.js里写了home的子类，所以这里写了router-view，右边就能跳转子类页面渲染-->
    </div>
  </div>
  <!---->
</template>








<script setup>  //记得加setup
import {ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

//Collapse折叠，定义变量控制左侧菜单栏是否折叠,false是默认不折叠,true是默认折叠，向左折叠直流个图标
const isCollapse = ref(false);
//定义方法切换左侧菜单栏是否折叠
const changeCollapsed = () => {
  isCollapse.value = !isCollapse.value;
}
//获取当前登录的用户信息
// const user = ref(getUser());  //ref里填的时候，能看到window的getUser方法




//设置变量来维护面包屑导航的值,默认为用户列表界面  要关联，写为响应变量
const breadCrubm = ref();  //无法解决刷新面包屑丢失问题
// const breadCrubm = ref(JSON.parse(localStorage.getItem('breadcrumb123') || '["用户管理啦啦啦","用户列表"]' ));
//解决刷新面包屑丢失问题 地1次登录与后续无数次   '["用户管理","用户列表"]'要单引号包双引号，因为localStorage维护的是字符串键值对   短路或，如果取出来值，就用前面的，如果没取出来值，空字符串转成布尔是false，就会走后面的
//因为还没写退出登录，所以进入登陆页面，console输入localStorage.clear()清除登录数据，模拟初次登录   此时进入user页面，会报错TypeError: Cannot read properties of null (reading 'username')
//成功登录后，进入的是默认的用户列表也，上面显示的是 首页/用户管理/用户列表 ，当然这里的只不过是写死的字符串，不是从下面方法得到的，这里的就是个样子货，外表达到了想要的效果，后面用户点击功能就能正常了

//准备数组用来维护左右面包屑导航的值 毕竟一堆跳转功能页面都要写对应的面包屑导航信息，所以用数组  因为这数组不与上面交流，所以不设为响应变量
let map = {
  "/welcome": ['欢迎', '欢迎'],
  "/food": ['菜品管理', '菜品列表'],
  "/customer": ['顾客管理', '顾客列表'],
  "/management": ['平台员工管理', '员工列表'],
  "/order": ['订单管理', '订单列表'],
  "/restaurant": ['商户管理', '商户列表']
}
// "/application": ['调度管理', '申请列表'],
// "/audit": ['调度管理', '调度审核'],
//选择菜单项时触发，index是选了哪一个菜单项
// 上面<el-menu-item index="/user">用户列表</el-menu-item> 每个都有自己的index，点击时就把这个index自动传过来了，然后查数组里的对应index一样的元素
const selectMenu = (index) => {
  //根据选择的菜单项设置面包屑导航的值
  breadCrubm.value = map[index];
  //解决刷新面包屑值丢失的问题：每选一个功能，就存到localStorage中   点中具体功能后，一刷新，上面的面包屑就变成“首页”
  localStorage.setItem("breadcrumb123",JSON.stringify(breadCrubm.value));  //这第一个名字随便起的啊，只是要对应后面breadCrubm的值
}

//退出登录功能
// const logout = ()=>{
//   if (confirm('您确认要退出嘛？')){ //弹窗    clear也行，但却是完全清空，不推荐，是因为连车辆信息那些缓存也清空了？？
//     //比如登陆后，随便点个功能，控制台console里输入localStorage.user   localStorage.breadcrumb123  能看到数据
//
//     //退出时清空localStorage中存的用户与面包屑信息  退出后刷新页面就是空白了，但用户不知道啊，所以需要加个跳转
//     localStorage.removeItem('user');
//     localStorage.removeItem('breadcrumb123');
//     //推出后去到登录页
//     window.location.href = '/login';
//     // 优化，还有一个地方也保存了用户登录数据，就是const user = ref(getUser()); 所以也要清除
//     user.value = '';  //写user.value = {};也行，清空就行，别写出undefined,null就行  记得是根据值推断类型的
//   }
// }
</script>
